<template>
  <div class="modal-demo-page">
    <!-- 页面标题 -->
    <div class="hero bg-base-200 rounded-3xl mb-8">
      <div class="hero-content text-center">
        <div class="max-w-md">
          <h1 class="text-5xl font-bold mb-4">🪟</h1>
          <h2 class="text-3xl font-bold text-base-content mb-4">Modal 组件演示</h2>
          <p class="text-base-content/70 mb-6">通用弹窗组件，支持多种尺寸、样式和交互方式</p>
          <div class="flex flex-wrap gap-2 justify-center">
            <div class="badge badge-primary">Vue 3</div>
            <div class="badge badge-secondary">TypeScript</div>
            <div class="badge badge-accent">Teleport</div>
            <div class="badge badge-neutral">Transition</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 演示类型选择 -->
    <div class="card bg-base-100 shadow-xl mb-8">
      <div class="card-body">
        <h3 class="card-title">🎯 演示类型</h3>
        <div class="flex flex-wrap gap-3">
          <button
            v-for="demoType in demoTypes"
            :key="demoType"
            @click="currentDemoType = demoType"
            class="btn btn-sm"
            :class="currentDemoType === demoType ? 'btn-primary' : 'btn-outline'"
          >
            {{ getDemoTypeIcon(demoType) }} {{ getDemoTypeName(demoType) }}
          </button>
        </div>
      </div>
    </div>

    <!-- 演示内容区域 -->
    <div class="demo-content">
      <!-- 插槽演示 -->
      <div v-if="currentDemoType === 'backdrop'" class="space-y-6">
        <BackdropSlotExample />
      </div>

      <div v-if="currentDemoType === 'header'" class="space-y-6">
        <HeaderSlotExample />
      </div>

      <div v-if="currentDemoType === 'content'" class="space-y-6">
        <ContentSlotExample />
      </div>

      <div v-if="currentDemoType === 'footer'" class="space-y-6">
        <FooterSlotExample />
      </div>

      <div v-if="currentDemoType === 'customization'" class="space-y-6">
        <SlotCustomizationExample />
      </div>

      <!-- 组件文档 -->
      <div v-if="currentDemoType === 'docs'" class="space-y-6">
        <ComponentDocs />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BackdropSlotExample from './examples/BackdropSlotExample.vue'
import HeaderSlotExample from './examples/HeaderSlotExample.vue'
import ContentSlotExample from './examples/ContentSlotExample.vue'
import FooterSlotExample from './examples/FooterSlotExample.vue'
import SlotCustomizationExample from './examples/SlotCustomizationExample.vue'
import ComponentDocs from './ComponentDocs.vue'

defineOptions({
  name: 'ModalDemoPage',
})

// 演示类型
type DemoType = 'backdrop' | 'header' | 'content' | 'footer' | 'customization' | 'docs'

const demoTypes: DemoType[] = ['backdrop', 'header', 'content', 'footer', 'customization', 'docs']
const currentDemoType = ref<DemoType>('backdrop')

// 获取演示类型图标
const getDemoTypeIcon = (type: DemoType): string => {
  const iconMap: Record<DemoType, string> = {
    backdrop: '🎨',
    header: '📋',
    content: '📄',
    footer: '🦶',
    customization: '🎯',
    docs: '📚',
  }
  return iconMap[type]
}

// 获取演示类型名称
const getDemoTypeName = (type: DemoType): string => {
  const nameMap: Record<DemoType, string> = {
    backdrop: '遮罩层插槽',
    header: '头部插槽',
    content: '内容插槽',
    footer: '底部插槽',
    customization: '完整自定义',
    docs: '组件文档',
  }
  return nameMap[type]
}
</script>

<style scoped lang="scss">
.modal-demo-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.demo-content {
  min-height: 400px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .modal-demo-page {
    padding: 1rem;
  }
}
</style>
